<template><!--User(user_id=19, username=wu1, password=123, patient_id=null, escort_id=null, user_permission=customer)-->
  <div class="patient-container">
    <h1>个人中心</h1>
    <!-- 检查用户信息是否加载完成 User(user_id=19, username=wu1, password=123, patient_id=null, escort_id=null, user_permission=customer)-->
    <div v-if="userInfo" style="width: 90%;align-content: center;">
      <el-form :model="userInfo" label-width="100px">
        <el-form-item label="Id">
          <el-input v-model="userInfo.user_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <!-- 修改：直接绑定 userInfo.password -->
          <el-input v-model="userInfo.password" disabled></el-input>
        </el-form-item>
        <el-form-item label="患者id">
          <!-- 修改：直接绑定 userInfo.patient_id -->
          <el-input v-model="userInfo.patient_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="权限类型">
          <!-- 修改：直接绑定 userInfo.user_permission -->
          <el-input v-model="userInfo.user_permission" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="showEditDialog">编辑</el-button>
    </div>
    <div v-else>
      加载中...
    </div>
    <!-- 编辑用户信息对话框 User(user_id=19, username=wu1, password=123, patient_id=null, escort_id=null, user_permission=customer)-->
    <el-dialog v-model="dialogFormVisible" title="编辑个人信息" width="500">
      <el-form :model="editUser" :rules="rules" ref="formRef" label-position="right" label-width="auto">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editUser.username" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editUser.password" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="患者id" prop="patient_id">
          <el-input v-model.number="editUser.patient_id" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEdit">修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getUserId'])
  },
  data() {/*User(user_id=19, username=wu1, password=123, patient_id=null, escort_id=null, user_permission=customer)*/
    return {
      // 修改：初始化 userInfo 对象
      userInfo: {
        user_id: null,
        username: '',
        password: '',
        patient_id: null,
        escort_id: null,
        user_permission: '',
      },
      dialogFormVisible: true,
      editUser: {
        user_id: null,
        username: '',
        password: '',
        patient_id: null,
        escort_id: null,
        user_permission: '',
      },/*User(user_id=19, username=wu1, password=123, patient_id=null, escort_id=null, user_permission=customer)*/
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        pat: [
          { required: true, message: '请输入患者id', trigger: 'blur' },
          { type: 'number', message: '患者id必须为数字值', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getPatientInfo();
  },
  methods: {
    async getPatientInfo() {
      const userId = this.getUserId;
      if (userId) {
        try {
          const res = await axios.get(`/api/wu_vue_2_test/User/getById?id=${userId}`);
          if (res.data.code === 200) {
            this.userInfo = {
              ...this.userInfo,
              ...res.data.data
            };
            this.editUser = {...this.userInfo};
          } else {
            ElMessage.error(res.data.message);
          }
        } catch (error) {
          console.error('请求出错:', error);
          ElMessage.error('请求出错，请稍后重试');
        }
      } else {
        ElMessage.error('未获取到用户信息，请重新登录');
        this.$router.push('/login');
      }
    },
    showEditDialog() {
      this.dialogFormVisible = true;
      this.editUser = {...this.userInfo};
    },
    async handleEdit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          try {
            const res = await axios.post('/api/wu_vue_2_test/User/update', this.editUser);
            if (res.data.code === 200) {
              this.userInfo = {...this.editUser};
              this.dialogFormVisible = false;
              ElMessage.success('修改成功');
            } else {
              ElMessage.error(res.data.message);
            }
          } catch (error) {
            console.error('修改数据失败:', error);
            ElMessage.error('修改数据失败，请稍后重试');
          }
        } else {
          console.log('表单验证不通过');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.patient-container {
  padding: 20px;
}
</style>